<template>
  <div class="page">
    <div class="page-wrapper">
      <el-row v-if="route.currentRoute.value.query.flag == 'detail'">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-row>

      <div v-if="mode === 'detail'" class="header">订单详情</div>
      <div v-else-if="mode === 'addOrder'" class="header">新增订单</div>
      <div v-else class="header">新增客户</div>

      <el-button
        v-if="htUrl != null"
        type="text"
        size="small"
        icon="el-icon-download"
        @click="handlePreview(scope.row)"
        >下载合同</el-button
      >

      <el-collapse v-model="activeNames" @change="handleChange">
        <collapse-item name="1" title="客户信息">
          <!-- 新增订单、订单详情-->
          <form-group
            :list="baseOrder"
            :options="option"
            :value="objValue"
            label-width="200px"
            ref="baseOrder"
            v-if="mode === 'addOrder' || mode === 'detail' || mode === 'goSale'"
            @changeItemT="changeItemT"
            @onchangeT="onchangeT"
          >
          </form-group>
          <!-- 新增客户（客户档案） -->
          <form-group
            :list="base"
            :options="option"
            :value="objValue"
            label-width="200px"
            ref="base"
            v-else
          />
        </collapse-item>
        <collapse-item
          v-if="
            objValue.custype === '1' &&
            mode != 'addOrder' &&
            mode != 'detail' &&
            mode != 'goSale'
          "
          name="2"
          title="代账公司专属信息"
        >
          <form-group
            :list="agency"
            :options="option"
            :value="objValue"
            label-width="200px"
            ref="agency"
          />
        </collapse-item>

        <collapse-item
          name="3"
          title="联系方式"
          v-if="mode != 'addOrder' && mode != 'detail' && mode != 'goSale'"
        >
          <div class="table">
            <div class="table-label">联系方式</div>
            <el-table class="table-content" :data="lxfs" stripe border>
              <el-table-column prop="label" align="center" width="100">
                <template #default="scoped">
                  <span v-if="scoped.row.index === 1" style="color: red"
                    >*</span
                  >
                  联系人{{ scoped.row.index }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="180"
              >
                <template #default="scoped">
                  <el-input
                    v-if="scoped.row.index == 3"
                    placeholder="姓名"
                    v-model="scoped.row.name"
                    disabled
                  ></el-input>
                  <el-input
                    v-else
                    placeholder="姓名"
                    v-model="scoped.row.name"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="work" align="center" label="职务">
                <template #default="scoped">
                  <el-input
                    v-if="scoped.row.index != 1"
                    placeholder="职务"
                    v-model="scoped.row.work"
                    disabled
                  ></el-input>
                  <el-input
                    v-else
                    placeholder="职务"
                    v-model="scoped.row.work"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phone" align="center" label="联系电话">
                <template #default="scoped">
                  <el-input
                    placeholder="联系电话"
                    v-model="scoped.row.phone"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="operate"
                align="center"
                label="操作"
                v-if="route.currentRoute.value.query.flag != 'detail'"
              >
                <template #default="scoped">
                  <el-button
                    v-if="scoped.row.index !== 1"
                    link
                    @click="delLxfs(scoped.row.index)"
                    >删除
                  </el-button>
                  <el-button
                    v-else
                    :disabled="lxfs.length === 3"
                    link
                    @click="addLxfs"
                    >添加
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <form-group
            :list="contact"
            :options="option"
            :value="objValue"
            label-width="200px"
            ref="contact"
          />
        </collapse-item>

        <div class="opening" v-if="mode != 'addCustomers'">
          <div class="title-box">
            <div style="display: flex; align-items: center">
              <div class="block"></div>
              <div class="open-title">开票信息</div>
            </div>
            <div>
              <span class="switch-title">暂不开票</span>
              <el-switch
                style="margin-left: 10px"
                v-model="showSwitch"
                @change="change"
              ></el-switch>
            </div>
          </div>
          <div class="border" v-if="!showOpen"></div>
          <form-group
            :list="invoice"
            :options="option"
            :value="objValue"
            label-width="200px"
            ref="invoice"
            v-show="showOpen"
          />
          <div class="border" v-if="showOpen"></div>
        </div>
        <collapse-item
          name="5"
          v-if="route.currentRoute.value.query.flag != 'addCustomers'"
          title="其他信息"
        >
          <form-group
            :list="other"
            :options="option"
            :value="objValue"
            label-width="110px"
          />
        </collapse-item>
        <collapse-item
          name="7"
          v-if="route.currentRoute.value.query.flag != 'addCustomers'"
          title="合同信息"
        >
          <el-button
            v-show="route.currentRoute.value.query.flag != 'detail'"
            type="primary"
            size="small"
            icon="Plus"
            @click="addAgreement"
            >新增</el-button
          >
          <el-button
            v-show="route.currentRoute.value.query.flag != 'detail'"
            type="danger"
            size="small"
            icon="Delete"
            @click="deleteAgreements"
            :disabled="multiple"
            >删除</el-button
          >
          <el-table
            :data="objValue.fileList"
            border
            style="width: 100%; margin-top: 10px"
            @selection-change="handleSelectionChange1"
          >
            <el-table-column
              v-if="route.currentRoute.value.query.flag != 'detail'"
              type="selection"
              align="center"
              width="55"
            >
            </el-table-column>
            <el-table-column
              type="index"
              label="合同序号"
              width="100"
              align="center"
            />

            <el-table-column prop="fileName" label="合同名称" align="center" />
            <el-table-column
              prop=""
              label="操作"
              align="center"
              v-if="route.currentRoute.value.query.flag == 'detail'"
            >
              <template #default="scoped">
                <el-button link @click="fetchFile(scoped.row.url)"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </collapse-item>
        <collapse-item
          name="6"
          v-if="route.currentRoute.value.query.flag != 'addCustomers'"
          title="订单信息"
        >
          <el-radio-group
            v-if="route.currentRoute.value.query.mark == 'checkOrder'"
            v-model="checkStatus"
          >
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="7">审核不通过</el-radio>
          </el-radio-group>

          <el-input
            v-if="route.currentRoute.value.query.mark == 'checkOrder'"
            v-show="checkStatus == '2'"
            v-model="orderNo"
            placeholder="请输入订单号"
            style="width: 200px"
          />

          <el-button
            v-show="route.currentRoute.value.query.flag != 'detail'"
            type="primary"
            size="small"
            icon="Plus"
            @click="addGoods"
            >新增物品</el-button
          >
          <el-button
            v-show="route.currentRoute.value.query.flag != 'detail'"
            type="danger"
            size="small"
            icon="Delete"
            @click="deleteGoods"
            :disabled="multiple"
            >删除物品</el-button
          >
          <el-button
            v-show="route.currentRoute.value.query.flag != 'detail'"
            type="success"
            size="small"
            icon="Edit"
            @click="updateGoods"
            :disabled="single"
            >修改物品</el-button
          >
          <el-table
            :data="objValue.orderlineList"
            border
            style="width: 100%; margin-top: 10px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              v-if="route.currentRoute.value.query.flag != 'detail'"
              type="selection"
              align="center"
              width="55"
            >
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            />

            <el-table-column prop="matId" label="物品编码" align="center" />
            <el-table-column prop="matName" label="物品名称" align="center" />
            <el-table-column prop="matType" label="规格/型号" align="center" />
            <el-table-column prop="matNum" label="数量" align="center" />
            <el-table-column prop="unitName" label="单位" align="center" />
            <el-table-column prop="unitPrice" label="单价" align="center" />
            <el-table-column prop="amount" label="总金额" align="center" />
            <el-table-column
              prop="collectAmount"
              label="回款金额"
              align="center"
            />
            <el-table-column
              prop="collectPercent"
              label="回款金额百分比"
              align="center"
            />
            <el-table-column prop="remark" label="备注" align="center" />
          </el-table>
          <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          /> -->
        </collapse-item>
      </el-collapse>

      <div class="footer">
        <el-button
          v-loading="loading"
          type="primary"
          @click="handleSubmit"
          v-show="
            route.currentRoute.value.query.flag != 'detail' ||
            route.currentRoute.value.query.mark == 'checkOrder'
          "
        >
          提交
        </el-button>
        <el-button v-if="mode.value != 'addOrder'" plain @click="handleBack">
          返回
        </el-button>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="650px"
      class="dialogTitle-page"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="单产品" name="first">
          <el-form
            :model="formT"
            ref="queryForm"
            :rules="rules"
            label-width="80px"
          >
            <el-form-item label="物品编码" prop="matId">
              <el-select
                filterable
                v-model="formT.matId"
                placeholder="请选择"
                @change="matCodeChange"
                style="width: 80%"
              >
                <el-option
                  v-for="item in matCodeOptions"
                  :key="item.matCode"
                  :label="item.matCode"
                  :value="item.matCode"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="物品名称" prop="matName">
              <el-select
                filterable
                v-model="formT.matName"
                placeholder="请选择"
                @change="matNameChange"
                style="width: 80%"
              >
                <el-option
                  v-for="item in matCodeOptions"
                  :key="item.matCode"
                  :label="item.matName"
                  :value="item.matName"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="规格/型号" prop="matType">
              <el-input
                v-model="formT.matType"
                placeholder=""
                disabled
                style="width: 80%"
              />
            </el-form-item>

            <el-form-item label="单位" prop="unitName">
              <el-input
                v-model="formT.unitName"
                placeholder=""
                disabled
                style="width: 80%"
              />
            </el-form-item>

            <el-form-item label="数量" prop="matNum">
              <el-input
                v-model="formT.matNum"
                placeholder="请输入数量"
                @input="onInput(0)"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="单价" prop="unitPrice">
              <el-input
                v-model="formT.unitPrice"
                placeholder="请输入单价"
                @input="onInput(1)"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="总金额" prop="amount">
              <el-input
                v-model="formT.amount"
                placeholder="请输入总金额"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formT.remark"
                type="textarea"
                placeholder="请输入备注"
                style="width: 80%"
              />
            </el-form-item>

            <el-row>
              <el-form-item style="margin-left: 80px">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onConfirm">确 定</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="套餐产品" name="second">
          <el-form
            :model="formMeal"
            ref="mealForm"
            :rules="ruleMeal"
            label-width="80px"
          >
            <el-form-item label="套餐名称" prop="mealName">
              <el-select
                filterable
                v-model="formMeal.mealName"
                placeholder="请选择"
                @change="mealNameChange"
                style="width: 100%"
              >
                <el-option
                  v-for="item in tableList"
                  :key="item.id"
                  :label="item.mealName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="套餐价格" prop="amount">
              <el-input v-model="formMeal.amount" placeholder="" disabled />
            </el-form-item>

            <el-form-item label="套餐内容" prop="amount">
              <el-table show-summary :data="mealLines" border>
                <el-table-column
                  prop="matName"
                  label="商品名称"
                  align="center"
                />
                <el-table-column prop="spec" label="商品规格" align="center" />
                <el-table-column prop="unit" label="单位" align="center" />
                <el-table-column prop="matNum" label="数量" align="center" />
                <el-table-column prop="price" label="单价" align="center" />
                <el-table-column prop="amount" label="金额" align="center" />
              </el-table>
            </el-form-item>

            <el-form-item style="margin-left: 80px">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="onConfirmMeal">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 新增合同弹出框 -->
    <el-dialog
      :title="agreementDialogTitle"
      v-model="agreementDialogVisible"
      width="35%"
    >
      <el-form
        :model="agreementForm"
        ref="agreementFormRef"
        :rules="agreementRules"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="合同名称" prop="fileName">
          <el-input
            v-model="agreementForm.fileName"
            placeholder="请输入合同名称"
          />
        </el-form-item>
        <el-form-item label="上传">
          <el-upload
            class="item item-value"
            action="#"
            :limit="1"
            :http-request="file => requestUpload(file)"
          >
            <el-button size="small" type="primary">
              选择
              <i class="el-icon-upload"></i>
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <span class="dialog-footer">
        <el-button @click="agreementDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="agreementOnConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup name="newOrder">
import { checkOrder } from '@/api/order/order'
import {
  fetchCityList,
  fetchRegionList,
  fetchCustomerTaxBureauList,
  fetchClassifyListAll,
  fetchAgencyList,
  fetchManagerList,
  customerListSelect,
  createCompany,
  updateCompany,
  fetchCustomerDetail,
  addOrder,
  detailOrder
} from '@/api/order/order'
import { materialList } from '@/api/erp/orderManagement'
import FormGroup from '@/views/erp/orderManagement/modules/FormGroup'
import CollapseItem from '@/views/erp/orderManagement/modules/CollapseItem'
// import { mapState } from "vuex";
import { fileUpload } from '@/api/order/order'
import { listTable, getMealLineList } from '@/api/erp/packageManagement'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCurrentInstance, nextTick, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const route = useRouter()
const router = useRouter()
const data = reactive({
  orderNo: undefined,
  checkStatus: 2,
  // 套餐内容表数据
  mealLines: [],
  // 表数据
  tableList: [],
  activeName: 'first',
  agreementForm: { fileName: null, url: null },
  disabled: false,
  htUrl: null,
  matCodes: '',
  urls: '',
  matCodeOptions: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  formT: {
    matId: '',
    amount: '',
    unitPrice: '',
    matNum: '',
    unitName: '',
    matType: '',
    matName: '',
    remark: ''
  },
  formMeal: {
    mealName: '',
    amount: ''
  },
  stateOptions: [
    {
      value: 1,
      label: '已提交订单'
    },
    {
      value: 2,
      label: '已作废'
    },
    {
      value: 3,
      label: '未回款订单'
    },
    {
      value: 4,
      label: '已完成订单'
    },
    {
      value: 5,
      label: '已保存A8'
    },
    {
      value: 6,
      label: 'A8已审核'
    },
    {
      value: 7,
      label: '待作废'
    }
  ],
  uploadQueryOptions: [],
  dialogVisible: false,
  agreementDialogVisible: false,
  agreementDialogTitle: '',
  dialogTitle: '',
  activities: [
    {
      content: '录入订单',
      size: 'large',
      type: 'primary',
      icon: 'el-icon-s-check',
      color: '#0bbd87'
    },
    {
      content: '合同上传',
      icon: 'el-icon-s-check',
      color: '#0bbd87'
    },
    {
      content: '订单审核',
      icon: 'el-icon-s-check',
      size: 'large'
    },
    {
      content: '出库商品',
      icon: 'el-icon-s-check',

      size: 'large'
    },
    {
      content: '开具发票',
      icon: 'el-icon-s-check',

      size: 'large'
    },
    {
      content: '回收款项',
      icon: 'el-icon-s-check',

      size: 'large',
      color: 'coral'
    }
  ],
  loading: false,
  mode: 'addCustomers',
  activeNames: ['1', '2', '3'],

  rules: {
    matId: [{ required: true, message: '请选择物料编码', trigger: 'blur' }],
    amount: [{ required: true, message: '请输入总金额', trigger: 'blur' }]
  },

  ruleMeal: {
    mealName: [{ required: true, message: '请选择套餐名称', trigger: 'blur' }]
  },

  agreementRules: {
    fileName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }]
  },

  base: [
    [
      {
        label: '纳税人识别号',
        id: 'ceTaxcode',
        rules: () => [
          {
            required: true,
            message: '请输入纳税人识别号',
            trigger: 'blur'
          }
        ]
      },
      {
        label: '企业名称',
        id: 'ceEtpname',
        rules: () => [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ]
      },
      {
        label: '企业性质',
        id: 'cusScaleId',
        type: 'select',
        rules: () => [
          { required: true, message: '请选择所属地区', trigger: 'blur' }
        ]
      }
    ],
    [
      {
        label: '所属地区',
        id: 'citycodes',
        type: 'select',
        mapper: ['codevalue', 'codename'],
        rules: () => [
          { required: true, message: '请选择所属地区', trigger: 'blur' }
        ]
      },
      {
        label: '所属片区',
        id: 'region',
        type: 'select',
        mapper: ['wdbm', 'wdname'],
        rules: () => [
          { required: true, message: '请选择所属片区', trigger: 'blur' }
        ]
      },
      {
        label: '所属税务机关',
        id: 'ceTaxbureaid',
        type: 'select',
        mapper: ['taxBureaId', 'taxBureaName'],
        rules: () => [
          {
            required: true,
            message: '请选择所属税务机关',
            trigger: 'blur'
          }
        ]
      }
    ],
    [
      {
        label: '客户经理',
        id: 'khjlid',
        type: 'select',
        mapper: ['khjlId', 'khjlName'],
        rules: () => [
          { required: true, message: '请选择客户经理', trigger: 'blur' }
        ]
      },
      {
        label: '客户类别',
        id: 'custype',
        type: 'select',
        rules: () => [
          { required: true, message: '请选择客户类别', trigger: 'blur' }
        ]
      },
      {
        label: '注册资本',
        id: 'ceRegmoney',
        type: 'number',
        rules: () => [
          { required: true, message: '请输入注册资本', trigger: 'blur' }
        ]
      }
    ]
  ],
  baseOrder: [
    [
      {
        label: '企业名称',
        placeholder: '请输入关键字模糊搜索',
        id: 'ceEtpname',
        type: 'select',
        mapper: ['ceTaxcode', 'ceEtpname'],
        change: true,
        span: 12,
        rules: () => [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ]
      },
      {
        label: '纳税人识别号',
        id: 'ceTaxcode',
        span: 12,
        rules: () => [
          {
            required: true,
            message: '请输入纳税人识别号',
            trigger: 'blur'
          }
        ]
      }
    ],
    [
      {
        label: '联系人',
        id: 'contactName',
        span: 12
      },
      {
        label: '联系方式',
        id: 'contactPhone',
        span: 12
      }
    ],
    [
      {
        label: '联系地址',
        id: 'contactAddress',
        span: 16
      }
    ]
  ],
  contact: [
    [
      // { label: '企业等级', id: 'xj', type: 'select', rules: [{ required: true, message: '请选择企业等级', trigger: 'blur' }]},
      {
        label: '企业地址',
        id: 'ceOfficeaddr',
        span: 8,
        rules: () => [
          { required: true, message: '请输入企业地址', trigger: 'blur' }
        ]
      }
      // { label: '所属代账公司', id: 'dzjgId', type: 'select', mapper: ['dzjgId', 'dzjgName'], show: val => { return val.custype !== '1'}},
    ]
  ],
  agency: [
    [
      {
        label: '授权码',
        id: 'sqm',
        rules: () => [
          { required: true, message: '请输入授权码', trigger: 'blur' }
        ]
      },
      // { label: '代账公司星级', id: 'xj', type: 'select', rules: [{ required: true, message: '请选择星级', trigger: 'blur' }]},
      {
        label: '星级授牌时间',
        id: 'spsj',
        type: 'date',
        rules: () => [
          {
            required: true,
            message: '请选择星级授权时间',
            trigger: 'blur'
          }
        ]
      },
      {
        label: '星级授牌到期时间',
        id: 'spdqsj',
        type: 'date',
        rules: () => [
          {
            required: true,
            message: '请选择星级授牌到期时间',
            trigger: 'blur'
          }
        ]
      }
    ],
    [
      {
        label: '代账公司每户分润金额',
        id: 'frje',
        rules: () => [
          {
            required: true,
            message: '请选择代账公司每户分润金额',
            trigger: 'blur'
          }
        ]
      },
      {
        label: '代账公司每户收取金额',
        id: 'sqje',
        rules: () => [
          {
            required: true,
            message: '请选择代账公司每户收取金额',
            trigger: 'blur'
          }
        ]
      },
      { label: '代账公司合同上传', id: 'htxy', type: 'upload' }
    ],
    [
      {
        label: '代账公司授牌照片上传',
        id: 'spzp',
        type: 'upload',
        span: 8
      }
    ]
  ],
  invoice: [
    [
      // { label: '开票客户名称', id: 'kpkhmc'},
      { label: '发票类型', id: 'billType', type: 'select' },
      // {
      //   label: "销售人员",
      //   id: "salespersonId",
      //   type: "input",
      //   rules: () => [
      //     {
      //       required: true,
      //       message: "请填写销售人员",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      { label: '发票邮箱', id: 'billEmail' }
    ],
    [
      {
        label: '银行名称',
        id: 'bank',
        span: 8,
        show: val => {
          return val.billType == '3' ? true : false
        },
        rules: val => {
          return val.billType === '3'
            ? [
                {
                  required: true,
                  message: '请输入银行名称',
                  trigger: 'blur'
                }
              ]
            : []
        }
      },
      {
        label: '银行卡号',
        id: 'bankAccount',
        span: 8,
        show: val => {
          return val.billType == '3' ? true : false
        },
        rules: val => {
          return val.billType === '3'
            ? [
                {
                  required: true,
                  message: '请输入银行账号',
                  trigger: 'blur'
                }
              ]
            : []
        }
      }
    ]
  ],
  other: [
    [
      { label: '所属业务板块', id: 'ssywbk', type: 'select', span: 8 },
      { label: '业务流程', id: 'ywlc', type: 'select', span: 8 },
      { label: '项目型业务关联', id: 'ck', type: 'select', span: 8 }
      // { label: '收款方式', id: 'skfs', type: 'select'},
      // { label: '销售类型', id: 'sslx', type: 'select'},
    ],
    [
      // { label: '开票点', id: 'ckd', type: 'select'},
      // { label: '提货点', id: 'thd', type: 'select'},
      // { label: '购买日期', id: 'gmrq', type: 'select'},
    ],
    [
      { label: '是否红字', id: 'sfhz', type: 'select', span: 8 },
      { label: '单据类型', id: 'djlx', type: 'select', span: 8 },
      { label: '合同', id: 'ht', type: 'upload', span: 8 }
    ],
    [{ label: '备注', id: 'remark', span: 24 }],
    [
      {
        label: '销售人员',
        id: 'salespersonId',
        type: 'input',
        span: 24
      }
    ]
  ],

  objValue: {
    ceBankaccount: null,
    ceContactmobileOne: null,
    ceContactmobileTwo: null,
    ceContactmobileThree: null,
    ceContactname: null,
    ceContactnameTwo: null,
    ceContactnameThree: null,
    ceCreatebank: null,
    bank: null,
    bankAccount: null,
    ceEtpname: null,
    ceOfficeaddr: null,
    ceRegmoney: null,
    ceTaxbureaid: null,
    ceTaxcode: null,
    citycodes: null,
    cusClassifyOne: null,
    cusClassifyThree: null,
    cusClassifyTwo: null,
    // cusId: 0,
    cusScaleId: null,
    cuslevel: null,
    custype: null,
    // dzjgId: null,
    // dzjgName: null,
    frje: null,
    htxy: null,
    khjlid: null,
    salespersonId: null, //销售人员
    khjlname: null,
    linkwork: null,
    linkworkTwo: null,
    linkworkThree: null,
    orgid: null,
    qyxx: null,
    region: null,
    remark: null,
    spsj: null,
    spzp: null,
    sqje: null,
    sqm: null,
    xj: null,
    spdqsj: null,
    qygm: null,
    classify: [],
    classifyName: null,
    sfhz: '1',
    djlx: '1',
    orderlineList: [],
    fileList: [], //合同列表
    contactName: null,
    contactPhone: null,
    contactAddress: null
  },

  option: {
    ceEtpname: [],
    cusScaleId: [
      { label: '一般纳税人', value: '0' },
      { label: '小规模纳税人', value: '1' },
      { label: '点下户', value: '2' },
      { label: '非纳税人', value: '3' }
    ],
    custype: [
      { label: '一般产品客户', value: '0' },
      { label: '代账公司', value: '1' },
      { label: '重点客户', value: '2' }
    ],
    xj: [
      { label: '一星', value: '1' },
      { label: '二星', value: '2' },
      { label: '三星', value: '3' },
      { label: '四星', value: '4' },
      { label: '五星', value: '5' }
    ],
    sfhz: [
      { label: '蓝字', value: '1' },
      { label: '红字', value: '2' }
    ],
    djlx: [
      { label: '通用', value: '1' },
      { label: '专用', value: '2' }
    ],
    ywlc: [
      { label: '普通流程', value: '1' },
      { label: '服务费流程', value: '2' },
      { label: '项目型业务流程', value: '3' }
    ],
    ssywbk: [
      { label: '金税', value: '1' },
      { label: '政务', value: '2' },
      { label: '金融', value: '3' }
    ],
    billType: [
      { label: '普通发票', value: '1' },
      { label: '电子发票', value: '2' },
      { label: '专用发票', value: '3' }
    ],
    khjlid: [],
    salespersonId: [], //销售人员
    dzjgId: [],
    ceTaxbureaid: [],
    citycodes: [],
    region: [],
    classify: []
  },

  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  lxfs: [{ index: 1, name: '', work: '', phone: '' }],
  showSwitch: true,
  showOpen: true
})
const {
  orderNo,
  checkStatus,
  // 套餐内容表数据
  mealLines,
  // 表数据
  tableList,
  activeName,
  agreementForm,
  disabled,
  htUrl,
  matCodes,
  urls,
  matCodeOptions,
  // 非单个禁用
  single,
  // 非多个禁用
  multiple,
  formT,
  formMeal,
  stateOptions,
  uploadQueryOptions,
  dialogVisible,
  agreementDialogVisible,
  agreementDialogTitle,
  dialogTitle,
  activities,
  loading,
  mode,
  activeNames,
  rules,
  ruleMeal,
  agreementRules,
  base,
  baseOrder,
  contact,
  agency,
  invoice,
  other,
  objValue,
  option,
  total,
  queryParams,
  lxfs,
  showSwitch,
  showOpen
} = toRefs(data)

// computed: {
//   ...mapState({
//     userName: (state) => state.user.name,
//     cityCode: (state) => state.user.city,
//   }),
// },
async function init() {
  await fetchCity()
  await fetchRegion()
  await fetchManager()
  if (route.currentRoute.value.query.flag == 'addCustomers') {
    // 新增客户
    mode.value = 'addCustomers'
    activeNames.value = ['1', '2', '3']
    let temp = [
      {
        label: '银行名称',
        id: 'ceCreatebank',
        span: 8,
        rules: () => [
          {
            required: true,
            message: '请输入银行名称',
            trigger: 'blur'
          }
        ]
      },
      {
        label: '银行卡号',
        id: 'ceBankaccount',
        span: 8,
        rules: () => [
          {
            required: true,
            message: '请输入银行卡号',
            trigger: 'blur'
          }
        ]
      }
    ]
    base.value.push(temp)
    for (var i in base.value) {
      for (var j in base.value[i]) {
        var item = base.value[i][j]
        if (item.label == '所属税务机关') {
          item.rules = null
        } else if (item.label == '注册资本') {
          item.rules = null
        }
      }
    }
  } else if (route.currentRoute.value.query.flag == 'goSale') {
    // 去销售
    mode.value = 'goSale'
    activeNames.value = ['1', '4', '5', '6', '7']
    setOther()
    objValue.value.salespersonId = option.value.khjlid[0].khjlName
    await customerDetail()

    objValue.value.classify = []
    objValue.value.cusClassifyOne &&
      objValue.value.cusClassifyTwo &&
      objValue.value.classify.push(objValue.value.cusClassifyTwo)
    objValue.value.cusClassifyThree &&
      objValue.value.classify.push(objValue.value.cusClassifyThree)
    objValue.value.classifyName =
      objValue.value.classifyname3 ||
      objValue.value.classifyname2 ||
      objValue.value.classifyname1
    objValue.value.contactName = objValue.value.ceContactname
    objValue.value.contactPhone = objValue.value.ceContactmobileOne
    objValue.value.contactAddress = objValue.value.ceOfficeaddr

    lxfs.value[0].name = objValue.value.ceContactname
    lxfs.value[0].phone = objValue.value.ceContactmobileOne
    lxfs.value[0].work = objValue.value.linkwork

    if (
      objValue.value.ceContactnameTwo ||
      objValue.value.ceContactmobileTwo ||
      objValue.value.linkworkTwo
    ) {
      lxfs.value.push({
        index: 2,
        name: objValue.value.ceContactnameTwo,
        work: objValue.value.linkworkTwo,
        phone: objValue.value.ceContactmobileTwo
      })
    }
    if (
      objValue.value.ceContactnameThree ||
      objValue.value.ceContactmobileThree ||
      objValue.value.linkworkThree
    ) {
      lxfs.value.push({
        index: 3,
        name: objValue.value.ceContactnameThree,
        work: objValue.value.linkworkThree,
        phone: objValue.value.ceContactmobileThree
      })
    }
  } else if (route.currentRoute.value.query.flag == 'detail') {
    // 详情
    mode.value = 'detail'
    htUrl.value = route.currentRoute.value.query.htUrl
    activeNames.value = ['4', '5', '6', '7']
    setOther()
    await getDetailOrder()
  } else {
    // 新增订单
    mode.value = 'addOrder'
    activeNames.value = ['1', '2', '3', '5', '6', '7']
    setOther()
  }
  await getMealList()
  await fetchAgency()
  await fetchClassify()
  await fetchTaxBureau()
  await getMaterialList()
}
init()

function setOther() {
  for (var i in other.value) {
    for (var j in other.value[i]) {
      var item = other.value[i][j]
      if (item.label == '合同') {
        other.value = [
          [
            { label: '所属业务板块', id: 'ssywbk', type: 'select' },
            { label: '业务流程', id: 'ywlc', type: 'select' },
            { label: '项目型业务关联', id: 'ck', type: 'select' }
          ],
          [
            { label: '是否红字', id: 'sfhz', type: 'select' },
            { label: '单据类型', id: 'djlx', type: 'select' },
            { label: '备注', id: 'remark' }
          ],
          [
            {
              label: '销售人员',
              id: 'salespersonId',
              type: 'select',
              mapper: ['khjlId', 'khjlName'],
              span: 8
            }
          ]
        ]
      }
    }
  }
}
async function getMaterialList() {
  const res = await materialList({ istatue: 1 })
  if (res.code === 200) {
    matCodeOptions.value = res.rows
  } else {
    // this.$message.error("获取物料列表失败！");
    proxy.$modal.msgError('获取物料列表失败！')
  }
}
async function customerDetail() {
  const res = await fetchCustomerDetail(route.currentRoute.value.query.cusId)
  if (res.code === 200) {
    objValue.value = { ...objValue.value, ...res.data }
  }
}

async function customerList() {
  const res = await customerListSelect()
  if (res.code === 200) {
    option.value.ceEtpname = res.data
    // console.log("kehu",this.option.ceEtpname);
  } else {
    // this.$message.error("获取企业客户下拉列表失败");
    proxy.$modal.msgError('获取企业客户下拉列表失败！')
  }
}

async function fetchManager() {
  const res = await fetchManagerList()
  if (res.code === 200) {
    option.value.salespersonId = res.data.map(item => ({
      ...item,
      khjlName: `${item.khjlName} (${item.khjlId})`
    }))
    option.value.khjlid = res.data.map(item => ({
      ...item,
      khjlName: `${item.khjlName} (${item.khjlId})`
    }))
  } else {
    // this.$message.error("获取客户经理列表失败");
    proxy.$modal.msgError('获取客户经理列表失败')
  }
}

async function getDetailOrder() {
  const res = await detailOrder({ id: route.currentRoute.value.query.id })
  if (res.code === 200) {
    objValue.value = { ...res.data.customer, ...res.data.order }
    objValue.value.orderlineList = res.data.orderlinePage.rows
    objValue.value.fileList = res.data.fileList
    lxfs.value[0].name = objValue.value.ceContactname
    lxfs.value[0].phone = objValue.value.ceContactmobileOne
    lxfs.value[0].work = objValue.value.linkwork

    if (
      objValue.value.ceContactnameTwo ||
      objValue.value.ceContactmobileTwo | objValue.value.linkworkTwo
    ) {
      lxfs.value.push({
        index: 2,
        name: objValue.value.ceContactnameTwo,
        work: objValue.value.linkworkTwo,
        phone: objValue.value.ceContactmobileTwo
      })
    }
    if (
      objValue.value.ceContactnameThree ||
      objValue.value.ceContactmobileThree ||
      objValue.value.linkworkThree
    ) {
      lxfs.value.push({
        index: 3,
        name: objValue.value.ceContactnameThree,
        work: objValue.value.linkworkThree,
        phone: objValue.value.ceContactmobileThree
      })
    }

    objValue.value.ceTaxcode = objValue.value.custTaxcode
  } else {
    // this.$message.error("获取订单详情失败");
    proxy.$modal.msgError('获取订单详情失败')
  }
}

async function fetchAgency() {
  const res = await fetchAgencyList()
  if (res.code === 200) {
    option.value.dzjgId = res.data
  } else {
    // this.$message.error("获取代账机构列表失败");
    proxy.$modal.msgError('获取代账机构列表失败')
  }
}
async function fetchClassify() {
  const res = await fetchClassifyListAll()
  if (res.code === 200) {
    option.value.classify = toTree(res.data)
  } else {
    // this.$message.error("获取客户分类列表失败");
    proxy.$modal.msgError('获取客户分类列表失败')
  }
}
function toTree(data) {
  let result = []
  if (!Array.isArray(data)) {
    return result
  }
  data.forEach(item => {
    delete item.children
  })
  let map = {}
  data.forEach(item => {
    map[item.id] = item
  })
  data.forEach(item => {
    let parent = map[item.parentid]
    if (parent) {
      ;(parent.children || (parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}
async function fetchTaxBureau() {
  const res = await fetchCustomerTaxBureauList()
  if (res.code === 200) {
    option.value.ceTaxbureaid = res.data
  } else {
    // this.$message.error("获取税局列表失败");
    proxy.$modal.msgError('获取税局列表失败')
  }
}
async function fetchRegion() {
  const res = await fetchRegionList()
  if (res.code === 200) {
    option.value.region = res.data
    // console.log(res.data)
  } else {
    // this.$message.error("获取区域列表失败");
    proxy.$modal.msgError('获取区域列表失败')
  }
}
async function fetchCity() {
  const res = await fetchCityList()
  if (res.code === 200) {
    option.value.citycodes = res.data
  } else {
    // this.$message.error("获取城市列表失败");s
    proxy.$modal.msgError('获取城市列表失败')
  }
}

function handleBack() {
  router.push({ path: '/xs/khda', query: {} })
}

function handleChange() {}

function pagination() {}
async function handleSubmit() {
  // 审核订单
  if (route.currentRoute.value.query.mark == 'checkOrder') {
    let res = await checkOrder({
      id: route.currentRoute.value.query.id,
      orderNo: orderNo.value,
      checkStatus: checkStatus.value
    })
    res.code === 200
      ? proxy.$modal.msgSuccess('操作成功')
      : proxy.$modal.msgError(res.msg)
  } else {
    let baseValid = true,
      contactValid = true,
      agencyValid = true,
      lxfsValid = true,
      invoiceValid = true,
      baseOrderValid = true
    if (mode.value == 'addOrder') {
      proxy.$refs.baseOrder.$refs.form.validate(valid => {
        if (!valid) {
          baseOrderValid = false
        }
      })
      // console.log("showOpen", !this.showOpen)
      if (showOpen.value) {
        proxy.$refs.invoice.$refs.form.validate(valid => {
          if (!valid) {
            invoiceValid = false
          }
        })
      }
    } else {
      if (objValue.value.custype === '2') {
        proxy.$refs.agency.$refs.form.validate(valid => {
          if (!valid) {
            agencyValid = false
          }
        })
      }
      proxy.$refs.base.$refs.form.validate(valid => {
        if (!valid) {
          baseValid = false
        }
      })
      proxy.$refs.contact.$refs.form.validate(valid => {
        if (!valid) {
          contactValid = false
        }
      })
      if (mode.value != 'addCustomers') {
        proxy.$refs.invoice.$refs.form.validate(valid => {
          if (!valid) {
            invoiceValid = false
          }
        })
      }

      for (const item of lxfs.value) {
        if (item.index != 3 && !item.name) {
          // this.$message.warning(`联系人${item.index}名称不能为空`);
          proxy.$message({
            message: `联系人${item.index}名称不能为空`,
            type: 'warning'
          })
          lxfsValid = false
        } else if (item.index == 1 && !item.work) {
          // this.$message.warning(`联系人${item.index}职务不能为空`);
          proxy.$message({
            message: `联系人${item.index}职务不能为空`,
            type: 'warning'
          })
          lxfsValid = false
        } else if (!item.phone) {
          // this.$message.warning(`联系人${item.index}联系电话不能为空`);
          proxy.$message({
            message: `联系人${item.index}联系电话不能为空`,
            type: 'warning'
          })
          lxfsValid = false
        }
      }
    }

    if (
      baseValid &&
      contactValid &&
      agencyValid &&
      lxfsValid &&
      baseOrderValid &&
      invoiceValid
    ) {
      const data = objValue.value
      data.cusClassifyOne = data.classify[0] ? data.classify[0] : null
      data.cusClassifyTwo = data.classify[1] ? data.classify[1] : null
      data.cusClassifyThree = data.classify[2] ? data.classify[2] : null

      data.ceContactname = lxfs.value[0].name
      data.ceContactmobileOne = lxfs.value[0].phone
      data.linkwork = lxfs.value[0].work

      data.ceContactnameTwo = lxfs.value[1]?.name || null
      data.ceContactmobileTwo = lxfs.value[1]?.phone || null
      data.linkworkTwo = lxfs.value[1]?.work || null

      data.ceContactnameThree = lxfs.value[2]?.name || null
      data.ceContactmobileThree = lxfs.value[2]?.phone || null
      data.linkworkThree = lxfs.value[2]?.work || null
      loading.value = true
      try {
        let res
        if (mode.value === 'addCustomers') {
          res = await createCompany(data)
          // console.log(res)
        } else if (mode.value === 'addOrder') {
          // let res1 = await createCompany(data);
          // let res2 = await addOrder(data);
          // if (res1.code != 200) {
          //   this.$message.error(res1.msg);
          // } else if (res2.code != 200) {
          //   this.$message.error(res2.msg);
          // } else {
          //   proxy.$modal.msgSuccess("操作成功");
          //   this.$router.push({
          //     path: "/xs/ddgl/ddlb",
          //   });
          // }

          res = await addOrder(data)
          if (res.code != 200) proxy.$modal.msgError(res.msg)
          else {
            proxy.$modal.msgSuccess('操作成功')
            router.push({
              path: '/xs/ddgl/myOrder'
            })
          }
        } else if (mode.value === 'goSale') {
          res = await addOrder(data)
        } else {
          res = await updateCompany(data)
        }
        if (mode.value != 'addOrder') {
          res.code === 200
            ? proxy.$modal.msgSuccess('操作成功')
            : proxy.$modal.msgError(res.msg)
          if (mode.value == 'goSale' || mode.value == 'addCustomers')
            router.push({ path: '/xs/khda' })
        }
        loading.value = false
      } catch (e) {
        console.log(e)
        // this.$message.error("新增订单服务异常 请重试");
        proxy.$modal.msgError('新增订单服务异常 请重试')
        loading.value = false
      }
    }
  }
}

function addLxfs() {
  lxfs.value.push({
    index: lxfs.value.length + 1,
    name: '',
    work: '',
    phone: ''
  })
}
function delLxfs(index) {
  lxfs.value.splice(index - 1, 1)
  lxfs.value = lxfs.value.map((item, index) => ({
    ...item,
    index: index + 1
  }))
}

// 新增合同
function addAgreement(e) {
  agreementDialogVisible.value = true
  agreementDialogTitle.value = '新增合同'
}

// 删除合同
function deleteAgreements(e) {
  // let that = this;
  // 确定删除么
  proxy
    .$confirm('是否确认删除?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(function () {
      for (var i in urls.value) {
        var index = objValue.value.fileList.findIndex(item => {
          if (item.url == urls.value[i]) return true
        })
        objValue.value.fileList.splice(index, 1)
      }
      // that.msgSuccess('删除成功')
      proxy.$modal.msgSuccess('删除成功')
    })
}

// 新增物品
function addGoods(e) {
  dialogVisible.value = true
  dialogTitle.value = '新增物品'
  resetFormT()
  resetMealFormT()
}

// 删除物品
function deleteGoods(e) {
  // let that = this;
  // 确定删除么
  proxy
    .$confirm(
      '是否确认删除物品编码为"' + matCodes.value + '"的数据项?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    .then(function () {
      for (var i in matCodes.value) {
        var index = objValue.value.orderlineList.findIndex(item => {
          if (item.matId == matCodes.value[i]) return true
        })
        objValue.value.orderlineList.splice(index, 1)
      }
      // that.msgSuccess('删除成功')
      proxy.$modal.msgSuccess('删除成功')
    })
}

// 修改物品
function updateGoods(e) {
  dialogVisible.value = true
  dialogTitle.value = '修改物品'
  // let that = this;
  objValue.value.orderlineList.forEach(item => {
    if (item.matId == matCodes.value[0]) {
      formT.value = item
    }
  })
}

// 确定按钮
function onConfirm() {
  proxy.$refs['queryForm'].validate(valid => {
    console.log('valid:' + valid)
    if (valid) {
      if (dialogTitle.value == '新增物品') {
        objValue.value.orderlineList.push(formT.value)
      } else if (dialogTitle.value == '修改物品') {
      }
      resetFormT()
      dialogVisible.value = false
    }
  })
}

// 确定按钮
function onConfirmMeal() {
  proxy.$refs['mealForm'].validate(valid => {
    console.log('valid:' + valid)
    if (valid) {
      if (dialogTitle.value == '新增物品') {
        console.log(mealLines.value)
        for (var i = 0; i < mealLines.value.length; i++) {
          var mealFormT = {
            matId: mealLines.value[i].matCode,
            matType: mealLines.value[i].spec,
            amount: mealLines.value[i].amount,
            unitPrice: mealLines.value[i].price,
            matNum: mealLines.value[i].matNum,
            unitName: mealLines.value[i].unit,
            matName: mealLines.value[i].matName
          }
          objValue.value.orderlineList.push(mealFormT)
        }
      } else if (dialogTitle.value == '修改物品') {
      }
      resetMealFormT()
      dialogVisible.value = false
    }
  })
}

function resetMealFormT() {
  mealLines.value = []
  formMeal.value = {
    mealName: '',
    amount: ''
  }
}

function resetFormT() {
  formT.value = {
    matId: '',
    amount: '',
    unitPrice: '',
    matNum: '',
    unitName: '',
    matType: '',
    matName: '',
    remark: ''
  }
}

// 多选框选中数据
function handleSelectionChange(selection) {
  matCodes.value = selection.map(item => item.matId)
  // console.log(this.matCodes);
  single.value = selection.length != 1
  multiple.value = !selection.length
}

// 多选框选中数据
function handleSelectionChange1(selection) {
  urls.value = selection.map(item => item.url)
  // console.log(urls);
  single.value = selection.length != 1
  multiple.value = !selection.length
}

function matCodeChange(e) {
  console.log(e)
  for (var i in matCodeOptions.value) {
    if (e == matCodeOptions.value[i].matCode) {
      formT.value.matName = matCodeOptions.value[i].matName
      formT.value.matType = matCodeOptions.value[i].spec
      formT.value.unitName = matCodeOptions.value[i].unit
    }
  }
}

function matNameChange(e) {
  console.log(e)
  for (var i in matCodeOptions.value) {
    if (e == matCodeOptions.value[i].matName) {
      formT.value.matId = matCodeOptions.value[i].matCode
      formT.value.matType = matCodeOptions.value[i].spec
      formT.value.unitName = matCodeOptions.value[i].unit
    }
  }
}

function mealNameChange(e) {
  for (var i in tableList.value) {
    if (e == tableList.value[i].id) {
      formMeal.value.amount = tableList.value[i].amount
      getMealLineList({ mealId: e }).then(res => {
        if (res.code == 200) {
          mealLines.value = res.data
        } else proxy.$modal.msgError(res.msg)
      })
      break
    }
  }
}

function agreementOnConfirm() {
  proxy.$refs.agreementFormRef.validate(valid => {
    if (valid) {
      if (agreementForm.value.url.value == null) {
        // this.$message("请上传合同");
        proxy.$message({
          message: '请上传合同',
          type: 'warning'
        })
        return false
      }
      objValue.value.fileList.push(agreementForm.value)
      agreementForm.value = { fileName: null, url: null }
      agreementDialogVisible.value = false
    }
  })
}

function onInput(flag) {
  if (formT.value.amount) {
    if (flag == 0 && formT.value.matNum) {
      formT.value.unitPrice =
        parseFloat(formT.value.amount) / parseFloat(formT.value.matNum)
    } else if (flag == 1 && formT.value.unitPrice) {
      formT.value.matNum =
        parseFloat(formT.value.amount) / parseFloat(formT.value.unitPrice)
    }
  }
}

// 覆盖默认的上传行为
async function requestUpload(file) {
  let formData = new FormData()
  formData.append('file', file.file)
  try {
    const res = await fileUpload(formData)
    if (res.code === 200) {
      console.log('res.url:' + res.data.name)
      agreementForm.value.url = res.data.url
    } else {
      // this.$message.error(res.msg);
      proxy.$modal.msgError(res.msg)
    }
  } catch (e) {
    console.log(e)
  }
}

/** 下载模板操作 */
function fetchFile(url) {
  // console.log(process.env.VUE_APP_BASE_API)
  window.location.href = url
}

// 查询套餐列表
async function getMealList() {
  let sendData = {
    pageNum: 1,
    pageSize: 10000
  }

  const res = await listTable(proxy.addDateRange(sendData))
  if (res.code === 200) {
    tableList.value = res.rows
  } else {
    // this.$message.error("获取套餐名称列表失败");
    proxy.$modal.msgError('获取套餐名称列表失败')
  }
}

function onCheckStatus(e) {
  // console.log(e);
}
//企业名称模糊搜索
function changeItemT(item) {
  customerListSelect({ keyword: item }).then(res => {
    if (res.code === 200) {
      option.value.ceEtpname = res.data
      // console.log("kehu", option.value.ceEtpname);
    } else {
      // this.$message.error("获取企业客户下拉列表失败");
      proxy.$modal.msgError('获取企业客户下拉列表失败')
    }
  })
}
function onchangeT(e) {
  objValue.value.ceTaxcode = e
  objValue.value.ceEtpname = option.value.ceEtpname.find(
    item => item.ceTaxcode == e
  )
    ? option.value.ceEtpname.find(item => item.ceTaxcode == e).ceEtpname
    : ''
}
function change() {
  if (showSwitch.value) {
    showOpen.value = true
  } else {
    showOpen.value = false
  }
}
</script>

<style lang="scss" scoped>
.dialogTitle-page {
  display: block;
  // ::v-deep{
  //   .el-form-item__content {
  //     width: 90%;
  //   }
  // }
}

.page {
  min-height: calc(100vh - 89px);
  height: calc(100vh - 89px);

  .page-wrapper {
    height: 100%;
    padding: 20px 60px;
    overflow-y: scroll;
  }
}

.el-collapse {
  margin-bottom: 40px;
}

.header {
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
}

.collapse-title {
  font-weight: 600;
}

.block {
  width: 3px;
  display: inline-block;
  height: 16px;
  background-color: rgb(62, 146, 255);
  margin-right: 8px;
}

.col .item {
  //border: 1px solid lightgray;
  height: 36px;
  margin-bottom: 20px;
  //border-right: none;
  //border-bottom: none;
}

.collapse .row:last-child {
  margin-bottom: 10px;
}

.item-label,
.item-value {
  // text-align: center;
  font-size: 12px;
  line-height: 30px;
}

.item-label {
  text-align: right;
  line-height: 36px;
  margin-right: 15px;
}

.footer {
  width: 100%;
  background-color: white;
  text-align: right;
  padding: 10px 30px;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  position: absolute;
  left: 0;
  z-index: 9999;
  right: 0;
  bottom: 0;
  height: 55px;
  border-top: 1px solid lightgray;

  .el-button {
    width: 100px;
  }
}

.table {
  margin: 22px 0;

  .table-label {
    display: inline-block;
    width: 200px;
    text-align: right;
    line-height: 36px;
    padding-right: 12px;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    vertical-align: top;
  }

  .table-content {
    width: calc(100% - 200px);
    display: inline-block;
  }
}

.opening {
  width: 100%;

  .title-box {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .block {
      width: 3px;
      display: inline-block;
      height: 16px;
      background-color: rgb(62, 146, 255);
      margin-right: 8px;
    }

    .open-title {
      // line-height: 48px;
      font-weight: 600;
      color: #303133;
      font-size: 13px;
    }
  }

  .border {
    height: 1px;
    background: #e6ebf5;
    width: 100%;
  }

  .switch-title {
    line-height: 48px;
    font-weight: 600;
    color: #303133;
    font-size: 13px;
  }
}
</style>

<style>
.el-timeline-item .el-timeline-item__wrapper {
  padding-left: 0px;
  top: 20px;
  width: 130px;
}

.el-timeline-item {
  float: left;
}

.el-timeline-item .el-timeline-item__tail {
  /* left: 20px; */
  top: 5px;
  height: 2px;
  border: none;
  width: 130px;
  background: #dfe4ed;
}

.footer {
  z-index: 999 !important;
}
</style>
